<template>
  <div
    v-if="inst"
    :class="['flow-card-box', hoverable ? 'flow-card-box-hoverable' : null]"
    @click="onCardClick()"
  >
    <div class="header">
      <a-typography-text bold class="name">
        {{ filterDate(inst.createTime) }} | {{ inst.modelName }}
      </a-typography-text>
      <div class="status">
        <template v-if="!submitable">
          <a-tag color="blue" v-if="filterStatus(flowInst) == 0">
            {{ TASK_STATUS[0].name }}
          </a-tag>
          <a-tag color="green" v-else-if="filterStatus(flowInst) == 1">
            {{ TASK_STATUS[1].name }}
          </a-tag>
          <a-tag color="red" v-else-if="filterStatus(flowInst) == 2">
            {{ TASK_STATUS[2].name }}
          </a-tag>
          <a-tag color="orangered" v-else-if="filterStatus(flowInst) == 3">
            {{ TASK_STATUS[3].name }}
          </a-tag>
        </template>
        <a-tag v-else-if="submitable"> 已保存 </a-tag>
      </div>
    </div>
    <div class="summary-list">
      <div class="summary-item">
        <div class="label">表单：</div>
        <div class="value">{{ inst.formName }}</div>
      </div>
      <div class="summary-item">
        <div class="label">流程状态：</div>
        <div class="value">{{ inst.instanceStatusDesc }}</div>
      </div>
    </div>
    <div class="footer">
      <div class="initiator">
        <flow-node-avatar :size="20" :name="inst.creatorName" />
      </div>
      <div class="begin-time">提交于 {{ inst.createTime }}</div>
    </div>

    <!-- 流程详情侧边栏 -->
    <!-- <a-drawer
      v-if="clickable"
      class="flow-card-detail-drawer"
      :width="770"
      :visible="flowDetailVisible"
      @ok="onDetailClose()"
      @cancel="onDetailClose()"
      unmountOnClose
      :footer="false"
      :header="false"
    >
      <flow-detail
        v-model:flow-inst="inst"
        :cancelable="false"
        :actionable="false"
        :commentable="false"
      />
    </a-drawer> -->
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import FlowInstApi from "@/api/FlowInstApi";
import {
  STATUS_LIST,
  TASK_STATUS,
  filterStatus,
} from "@/components/flow/common/FlowConstant";
import FlowDetail from "./flow-detail.vue";
import FlowNodeAvatar from "@/components/common/FlowNodeAvatar.vue";

const props = defineProps({
  flowInst: { type: Object, default: null },
  clickable: { type: Boolean, default: false },
  hoverable: { type: Boolean, default: true },
  submitable: { type: Boolean, default: false },
});

const inst = ref(null);
watch(
  props,
  (nv) => {
    inst.value = nv.flowInst.flowInstance
      ? nv.flowInst.flowInstance
      : nv.flowInst;
  },
  { immediate: true, deep: true }
);

const filterDate = (val) => {
  return val.slice(5, 10);
};

// 流程详情
const flowDetailVisible = ref(false);
const onCardClick = () => {
  if (props.clickable) flowDetailVisible.value = true;
};
const onDetailClose = () => {
  flowDetailVisible.value = false;
};
</script>

<style lang="less" scoped>
@import "@/styles/variables.module.less";

.flow-card-box {
  user-select: none;
  border-radius: @BorderRadius;
  overflow: hidden;
  border: 1px solid #e9ebef;
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
  // scroll-snap-align: start;
  // scroll-snap-type: y mandatory;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .name {
      font-size: 15px;
    }
  }

  .summary-list {
    margin-top: 10px;

    .summary-item {
      display: flex;
      min-height: 22px;
      font-size: 13px;

      .label {
        color: #9ba5b3;
        // width: @FlowCardFieldLabelWidth;
        overflow: hidden;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .value {
        color: #232730;
        // max-width: calc(100% - @FlowCardFieldLabelWidth);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;

    .initiator {
      display: flex;
      align-items: center;
    }

    .begin-time {
      color: var(--color-neutral-6);
    }
  }
}

.flow-card-box-hoverable {
  &:hover {
    box-shadow: 4px 4px 12px rgb(var(--gray-3));
  }
}
</style>

<style lang="less">
.flow-card-detail-drawer {
  .arco-drawer-body {
    padding: 0;
  }
}
</style>
